import React from 'react';
import _ from 'lodash'

export default class CenterSettingList extends React.Component {
  constructor(props) {
    super(props)
  }

  onDeleteClick(data) {
    if (confirm("确认要取消该户号吗?")) {
      this.props.onDeleteClick(data)
    }
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data && this.props.data.unit && this.props.data.unit.length > 0) {
      this.props.data.unit.forEach(function(data, index) {
        content.push((
          <tr>
            <td>{data.unit_desc}</td>
            <td className="f-dn">
              <a onClick={(event)=>self.onDeleteClick(data.id)}>删除</a>
            </td>
          </tr>
        ))
      })
    }
    return content
  }

  render() {
    var name = "";
    var email = "";
    var mobile = "";
    var property = "";
    if (this.props.data) {
      var data = this.props.data
      name = data.firstName+ " " + data.lastName
      email = data.email;
      mobile = data.mobile;
      property = data.WorkingProperty?data.WorkingProperty.name:""
    }

    var condition = false;
    var sysUser = this.props.sysUser;
    // console.log(sysUser)
    if (sysUser) {
      var sys_role_user = sysUser.sys_role_user;
      var hasOne = _.find(sys_role_user, function(o) {
        return o.role.name == '物业管家' || o.role.name == '管家客服'
      })
    }
    condition = (this.props.userType=='PROPERTY') && hasOne


    return(
      <div className="center-setting-list setting-list">
        <div className="panel panel-default">
          <div className="panel-heading">个人信息</div>
          <div className="panel-body">
            <p>{name}</p>
            <p>{mobile}</p>
            <p>{email}</p>
            <p>{property}</p>
          </div>
        </div>
        {condition?(<table className="table ">
          <thead>
            <tr className="table-title">
              <th>已绑定户号</th>
              <th className="f-dn">操作</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>):""}
      </div>
    )
  }
}
